<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .add {
        border: 1px solid #000;
        max-width: 700px;
        margin-bottom: 20px;
        padding: 20px;
        text-align: center;
    }

    table,
    td,
    th {
        border: 1px solid #000;
        border-collapse: collapse;
        width: 700px;
        text-align: center;
    }
</style>

<body>
    <div id="app">
        <div class="add">
            编号:
            <input type="text" v-model="code">
            品牌名称:
            <input type="text" v-model="goodsName">
            <br>
            产品图片地址:
            <input type="text" v-model="imgUrl">
            价格:
            <input type="text" v-model="price">
            <button @click="add">点击增加</button>
        </div>
        <div class="tb">
            <table>
                <tr>
                    <th>
                        全选:
                        <input type="checkbox" @change="allCheckChange" :checked="allCheck">
                    </th>
                    <th>
                        产品图片
                    </th>
                    <th>
                        编号
                    </th>
                    <th>
                        品牌名称
                    </th>
                    <th>
                        价格
                    </th>
                    <th>
                        数量
                    </th>
                    <th>
                        操作
                    </th>
                </tr>
                <tr v-for="(item,i) in goods">
                    <td>
                        <input type="checkbox" v-model="checks" :value="item">
                    </td>
                    <td>
                        <img width="50" height="50" :src="item.imgUrl" alt="">
                    </td>
                    <td>
                        {{item.code}}
                    </td>
                    <td>
                        {{item.goodsName}}
                    </td>
                    <td>
                        {{item.price}}
                    </td>
                    <td>
                        <button :disabled="item.inventory==1" @click="decrease(item)">-</button>
                        <b> {{item.inventory}}</b>
                        <button @click="increase(item)">+</button>
                    </td>
                    <td>
                        <button @click="del(i)">删除</button>
                    </td>
                </tr>
            </table>
            <div class="add" v-show="!goods.length">
                没有更多数据了
            </div>
            <div class="add" style="width:658px;text-align:right">
                <h1>总价:{{total}}</h1>
            </div>
        </div>
    </div>
</body>

</html>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>

    //增加
    //1.给输入框使用v-model绑定数据

    //2.往goods数组中,多增加一个对象,视图就会多增加一个,使用数组的push

    //删除

    //1.点击按钮,获取当前这条数据的索引

    //2.使用数组的方法splice(索引,1) 就能删除

    //全选和反选功能

    //1.点击全选按钮,所有的选择框都要被选择

    //2.再次点击全选,所有的选择框取消选择

    //3.勾选列表中的选择框,全部被勾选的时候,全选按钮也需要被选择

    let vm = new Vue({
        el: "#app",
        data: {
            //控制全选checkbox
            allCheck: false,
            code: "",
            imgUrl: "",
            goodsName: "",
            price: "",
            //被勾选的内容
            checks: [],
            goods: [
                {
                    id: 1,
                    goodsName: "苹果",
                    imgUrl: "https://ts1.cn.mm.bing.net/th/id/R-C.d6d3aae7006611f68786a47e377c39ea?rik=7IrzMCwE5z2KgQ&riu=http%3a%2f%2fpic.ntimg.cn%2f20131028%2f13984383_171843651115_2.jpg&ehk=4SCA2042hzkkZofnLUSML2WgVzwz9RMXyKkXwc2zHG0%3d&risl=&pid=ImgRaw&r=0",
                    price: "20",
                    inventory: 30,
                    code: 1
                },
                {
                    id: 2,
                    goodsName: "香蕉",
                    imgUrl: "https://ts1.cn.mm.bing.net/th/id/R-C.d1a6957661d8dbfbd0cb3a7ef14cd7d6?rik=ltM8ZHpR39OuhA&riu=http%3a%2f%2fpic32.photophoto.cn%2f20140828%2f0012024907646838_b.jpg&ehk=wAQVHp9i%2fC7aPHXs6FExKS3mHQcrt%2ft%2fKDFSD2FGa1k%3d&risl=&pid=ImgRaw&r=0",
                    price: "120",
                    inventory: 10,
                    code: 2
                },
                {
                    id: 3,
                    goodsName: "橘子",
                    imgUrl: "https://img.zcool.cn/community/016af55dea2e44a801209568054e81.jpg@1280w_1l_2o_100sh.jpg",
                    price: "220",
                    inventory: 40,
                    code: 3
                },
            ]
        },
        watch: {
            //数组不需要使用深度侦听
            checks(newVal) {
                // console.log(newVal)
                if (newVal.length === this.goods.length) {
                    //列表中的内容全部被勾选了,那么全选checkbox也要被勾选
                    this.allCheck = true;
                } else {
                    this.allCheck = false
                }
            }
        },
        computed: {
            total() {
                return (this.checks.reduce(function (total, item) {
                    return total += item.price * item.inventory
                }, 0)).toFixed(2)
            }
        },
        methods: {
            //点击全选checkbox的时候
            allCheckChange(e) {
                // console.log('123')
                console.log(e.target.checked)
                let checked = e.target.checked;
                if (checked) {
                    //全选按钮被勾选了
                    this.checks = this.goods;
                } else {
                    this.checks = []
                }
            },
            add() {

                //非空验证
                if (!this.code || !this.price || !this.goodsName) {
                    return
                }

                //编程思路:一切基于数据,以数据驱动

                //先声明一个对象
                let obj = {
                    id: Math.random().toString(32).substring(2),
                    goodsName: this.goodsName,
                    code: this.code,
                    imgUrl: this.imgUrl ? this.imgUrl : 'https://img.zcool.cn/community/03196b456d7e744000001490d57799f.jpg@260w_195h_1c_1e_1o_100sh.jpg',
                    price: this.price,
                    inventory: 1
                }

                this.goods.push(obj)
            },
            del(i) {
                console.log(i)
                this.goods.splice(i, 1)
            },
            // 数量增加
            increase(item) {
                console.log(item)
                item.inventory++
            },
            //数量减少
            decrease(item) {
                item.inventory--
            }
        }
    })
</script>